<template>
	<view>
		<view v-if="indexDo == 1">
			<swiper class="image-container" previous-margin="36rpx" next-margin="36rpx" circular :hidden="autoplay" :autoplay="!autoplay" interval="5000" @change="swiperChange">
				<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="index">
					<image @click="clickImg(item)" :class="currentIndex == index ? 'item-img' : 'item-img-side'" :src="item+'?imageView2/0/w/300'" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''" ></image>
					<!-- <image src="/static/play.png" class="play" @click="BoFang(item)" mode="" v-if="item.data_type == 2"></image> -->
				</swiper-item>
			</swiper>
			<view class="image-container" :hidden="!autoplay" v-if="autoplay">
				<view class="disCenter">
					<video :src="videoSrc" id="myVideo" class="video-play" :autoplay="autoplay" controls @pause="ZhanTing" @ended="ZhanTing"></video>
				</view>
			</view>
		</view>
		<view v-if="indexDo == 2">
			<swiper class="image-container2" circular :hidden="autoplay" :autoplay="!autoplay" interval="5000" @change="swiperChange">
				<swiper-item class="swiper-item-index" v-for="(item, index) in imgList" :key="index">
					<image @click="clickImg(item)" class="item-img-index" :src="item.img+'?imageView2/0/w/300'" lazy-load ></image>
					<!-- <image src="/static/play.png" class="play" @click="BoFang(item)" mode="" v-if="item.data_type == 2"></image> -->
				</swiper-item>
			</swiper>
			<view class="" :hidden="autoplay">
				<swiper-dot class="dot" :current="currentIndex" :list="imgList"></swiper-dot>
			</view>
			<view class="image-container2" :hidden="!autoplay" v-if="autoplay">
				<view class="disCenter">
					<video :src="videoSrc" id="myVideo" class="video-play2" :autoplay="autoplay" controls @pause="ZhanTing" @ended="ZhanTing"></video>
				</view>
			</view>
		</view>
		<view v-if="indexDo == 3">
			<swiper class="image-container3" previous-margin="36rpx" next-margin="36rpx" circular :hidden="autoplay" :autoplay="!autoplay" interval="5000" @change="swiperChange" :current="currentIndex">
				<swiper-item :class="currentIndex == index ? 'swiper-item3' : 'swiper-item-side3'" v-for="(item, index) in imgList" :key="index" class="flex flex-direction">
					<image @click="clickImg(item)" :class="currentIndex == index ? 'item-img' : 'item-img-side'" :src="item.img_url+'?imageView2/0/w/300'" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''" ></image>
					<view class="p-t-10 p-b-10 p-l-20 p-r-10 f-15 fontBold width100 swiper-item-txt3">
						{{item.user_name}}
					</view>
				</swiper-item>
			</swiper>
			<view class="image-container" :hidden="!autoplay" v-if="autoplay">
				<view class="disCenter">
					<video :src="videoSrc" id="myVideo" class="video-play" :autoplay="autoplay" controls @pause="ZhanTing" @ended="ZhanTing"></video>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import swiperDot from "./swiperDot.vue";
	export default {
		components:{
			swiperDot
		},
		props: {
			imgList: {
				type: Array,
				default() {
					return []
				}
			},
			videoSrc:{
				type: String,
				default() {
					return ''
				}
			},
			urlKey: {
				type: String,
				default() {
					return ''
				}
			},
			indexDo: {
				type: Number,
				default() {
					return 1
				}
			},
		},
		data() {
			return {
				currentIndex: 0,
				dontFirstAnimation: true,
				videoContext:'',
				autoplay:false,
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo');
			// #endif
		},
		methods: {
			swiperChange(e) {
				this.dontFirstAnimation = false;
				this.currentIndex = e.detail.current;
			},
			clickImg(item) {
				this.$emit('selected', item, this.currentIndex);
			},
			BoFang(item){
				if(this.autoplay==false&&this.videoSrc){
					this.autoplay=true;
					this.videoContext.play();
				}
			},
			ZhanTing(){
				if(this.autoplay==true){
					this.autoplay=false;
					this.videoContext.pause();
				}
			},
		}
	}
</script>
<style scoped>
	.image-container {
		width: 750rpx;
		/* height: 280rpx; */
	}
	.image-container2 {
		width: 750rpx;
		/* height: 340rpx; */
	}
	.image-container3{
		width: 750rpx;
		height: 360rpx;
	}
	.item-img {
		width: 650rpx;
		height: 280rpx;
		border-radius: 14rpx;
		animation: to-big .3s;
	}
	.video-play{
		width: 650rpx;
		height: 280rpx;
		border-radius: 14rpx;
	}
	.video-play2{
		width: 690rpx;
		height: 340rpx;
		border-radius: 14rpx;
	}
	.swiper-item {
		width: 650rpx;
		height: 280rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	
	.item-img-side {
		width: 650rpx;
		height: 240rpx;
		border-radius: 14rpx;
		animation: to-mini .3s;
	}
	.swiper-item-index{
		width: 690rpx;
		height: 320rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.item-img-index{
		width: 690rpx;
		height: 280rpx;
		border-radius: 14rpx;
	}
	.curNum{
		padding: 4upx 23upx;
		background: #000000;
		opacity: 0.5;
		color: #fff;
		position: absolute;
		z-index: 100;
		bottom: 0;
		right: 32upx;
	}
	.swiper-item-side {
		width: 650rpx;
		height: 240rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.swiper-item3 {
		width: 650rpx;
		height: 360rpx !important;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.swiper-item-side3 {
		width: 650rpx;
		height: 320rpx !important;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-top: 20rpx;
	}
	.swiper-item-txt3{
		position: relative;
		z-index: 10;
	}
	.play{
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		z-index: 100;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	@keyframes to-mini
	{
		from {
			height: 280rpx;
		}
		to {
			height: 240rpx;
		}
	}
	@keyframes to-big
	{
		from {
			height: 240rpx;
		}
		to {
			height: 280rpx;
		}
	}
</style>
